<template>
  <div>
    <el-table :data="rootList" style="width: 100%">
      <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
      <el-table-column prop="address" label="权限">
        <template slot-scope="scope">
          <!-- scope.row: 当前行的数据 -->
          {{ getRootName(scope.row.rule) }}
        </template>
      </el-table-column>

      <!-- 操作 -->
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="primary" @click="editRoot(scope.row)"
            >修改</el-button>
            <!-- <el-button type="primary" @click="toDetail(scope.row)"
            >详情</el-button> -->
            <router-link :to="{name: 'detail', query: {id: scope.row.id}}">详情</router-link>
        </template>
      </el-table-column>
    </el-table>

    <!-- 修改权限弹框 -->
    <el-dialog
      title="修改权限"
      :visible="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <el-checkbox-group v-model="ruleArr">
        <el-checkbox
          v-for="(item, idx) in rootNameList"
          :label="item.root"
          :key="idx"
          >{{ item.title }}</el-checkbox
        >
      </el-checkbox-group>

      <!-- 确认按钮 -->
      <el-button @click="ok">确认</el-button>
    </el-dialog>
  </div>
</template>

<script>
import { apigetUserList, apiEditRule } from "@/api";
export default {
  data() {
    return {
      dialogVisible: false, // 弹框的显示与隐藏
      rootList: [],
      arr: [],
      userId: null, // 修改权限得用户
      ruleArr: [], // 需要修改的权限数组
      rootNameList: [
        {
          root: "1",
          title: "首页",
        },
        {
          root: "2",
          title: "商品列表",
        },
        {
          root: "3",
          title: "用户信息",
        },
        {
          root: "4",
          title: "权限管理",
        },
      ],
    };
  },
  created() {
    this.getUserList();
  },
  methods: {
    // 获取用户列表
    getUserList() {
      apigetUserList().then((res) => {
        this.rootList = res.data;
      });
    },
    getRootName(str) {
      // 将权限字符串 转化为数组
      const ruleArray = str.split(",");

      let ruleStr = "";

      this.rootNameList.forEach((item) => {
        if (ruleArray.some((val) => val === item.root)) {
          ruleStr += `${item.title} `;
        }
      });

      return ruleStr;
    },
    // 修改权限
    editRoot(str) {
      // 权限字符串
      this.ruleArr = str.rule.split(",");
      //   设置权限的用户
      this.userId = str.id;

      // 将弹框打开
      this.dialogVisible = !this.dialogVisible;
    },
    handleClose() {
      // 将权限数组清空
      this.ruleArr = [];

      // 将弹框打开
      this.dialogVisible = !this.dialogVisible;
    },
    // 确认按钮
    ok() {
      // this.ruleArr.join(","):将权限数组 转化为权限字符串
      apiEditRule({ id: this.userId, rule: this.ruleArr.join(",") }).then(
        (res) => {
          // 刷新列表
          window.location.href = '/root'
        }
      );
    },
    // 跳转详情
    toDetail(data) {
      // 路由 传参方式 3种
      // params: 会将参数显示到地址栏上
        // 跳转方式：路由式
        //          编程式
        // this.$router.push(`/detail/${data.id}`)
      // params：不会参数显示到地址栏上
      // this.$router.push({
      //   name: 'detail',
      //   params: {
      //     id: data.id
      //   }
      // })
      // query:
      this.$router.push({
        name: 'detail',
        query: {
          id: data.id
        }
      })

    }
  },
};
</script>